﻿@using SampleWebApp.Models;
@using SampleWebApp.Extensions;

@{
    ViewBag.Title = "Index";
}

<script>
    @Html.Raw(Html.RenderScriptInitialization(new Person(), "newPerson"));
</script>

<h3>People</h3>

<div data-bind="visible:app.viewModel.people">
    <ul data-bind="foreach: app.viewModel.people">
        <li><span data-bind="text:firstName() + ' ' + lastName()"></span><a href="#" data-bind="click:function(e,i){app.viewModel.edit($data);}">Edit</a> <a href="#" data-bind="click:function(e,i){app.viewModel.remove($data);}">Remove</a></li>
    </ul>  
    Refresh this page to see list loaded from web-api call.
</div>


<fieldset data-bind="with:app.viewModel.person">

    <span data-bind="text:app.viewModel.saveError" class="validationMessage"></span>

    <legend>Add or edit person:</legend>
    <label>First Name: <input type="text" data-bind="value:firstName" /></label>
    <label>MiddleName:<input type="text" data-bind="value:middleName" /></label>
    <label>
        Last Name: <input type="text" data-bind="value:lastName" />
    </label>
    <label>
        Email:<input type="email" data-bind="value:email" />
    </label>
    <label>
        Password:<input type="password" data-bind="value:password" />
    </label>
    <label>
        Password Confirmation:<input type="password" data-bind="value:passwordConfirmation" />
    </label>

    <input type="button" value="Save" data-bind="click:function(e,i){app.viewModel.save();}" />
</fieldset>


